{% extends "base.html" %}

{%block title%}
{{recipe.title}} - DigiChef
{%endblock title%}

{%block styles%}
	<!-- for voting bars -->
	<link rel="stylesheet" href="/media/css/voting.css" type="text/css" media="screen" title="Stylesheet" charset="utf-8" />
{%endblock styles%}

{%block scripts%}
	<script type="text/javascript" charset="utf-8" src="/media/scripts/jquery-1.4.2.min.js"></script>
	
	<!-- for voting bars-->
	<script type="text/javascript" charset="utf-8">
		$(function() {
			$("#voting a").click(function() {
				var current = $(this);
				var parent = current.parent().parent();
				var recipeId = parent.attr('recipeId');

				if (current.is("#voting-upvote")) {
					vote(recipeId, 'up');
				} else if (current.is("#voting-downvote")) {
					vote(recipeId, 'down');
				} else if (current.is("#voting-clearvote")) {
					vote(recipeId, 'clear');
				}

				return false;
			});

			function vote(id, direction) {
				$.post('/recipes/'+id+'/'+direction+'vote/', {HTTP_X_REQUESTED:'XMLHttpRequest'},
					   function(data) {
						   if (data.success == true) {
						       $('#score').text(data.score.score);
						       $('#num_votes').text(data.score.num_votes);
						   } else {
						       alert('ERROR: ' + data.error_message);
						   }
					   }, 'json'
					  )
			}
			//used to load a list of similar recipes
			var similar_recipes = $('#similar_recipes');
			similar_recipes.text("Loading...");
			$.get("{%url api_similar recipe.id%}", {}, function(data) {
				similar_recipes.text("");
				$.each(data, function(i, item){
					var title = item.title;
					var url = item.url;
					var img_url = item.img_url;
//					similar_recipes.append('<li><a href="'+url+'">'+title+'</a></li>');
					similar_recipes.append('<li><span class=\"thumbnail_item\"><a href=\"'+url+'\"><span class=\"photo-wrapper recipe-thumbnail\"><img class=\"similar_thumbnail\" src=\"'+img_url+'\" /></span>'+title+'</a></span></li>');
				});
			}, 'json');
		});
	</script>

{%endblock scripts%}

{%block content%}
	<!--menubar code; source: http://13styles.com/css-menus/wax/-->	
	<div class="orange">
		<div id="waxcontainer">
			<div id="waxnav">
				<ul>
					<li><a href="/" title=""><span>Home</span></a></li>
					{%if user.is_authenticated%}
					<li><a href="/profiles/{{user.username}}" title=""><span>My Profile</span></a></li>
					{%endif%}
					<li><a href="/about" title=""><span>About Us</span></a></li>
				</ul>
			</div>
		</div>
	</div>
		
	<div id="page">
		<div class="photo-wrapper clipped_image_wrapper" id="recipe_image_wrapper">
			<span></span>
			<img id="recipe_image" src="{{recipe.image_url}}" alt="{{recipe.title}}"\>
		</div>

		<h1>{{recipe.title}}</h1>

		{%if recipe.uploader%}
			{%ifequal recipe.uploader request.user%}
				<p>by <a href="{{recipe.uploader.get_absolute_url}}">You</a></p>
			{%else%}
				<p>by <a href="{{recipe.uploader.get_absolute_url}}">{{recipe.uploader.get_full_name}}</a></p>
			{%endifequal%}
		{%endif%}


		<h2>Ingredients</h2>

		<ul>
			{% for ingredient in ingredient_list %}
			<li>{{ ingredient }}</li>
			{% endfor %}
		</ul>

		<h2>Instructions</h2>
		<div class="instructions">{{recipe.instructions|linebreaks}}</div>

		<h2>Tags</h2>
		<p>{% for tag in recipe.tags %}
		{{tag.name}}{%if not forloop.last%} |{%endif%}
		{% endfor %}
		{%ifequal request.user recipe.uploader%}
		<a href="{%url recipe_tag recipe.id%}">edit</a>
		{%endifequal%}
		{%if request.user.is_superuser or request.user.is_staff%}
		<a href="{%url recipe_tag recipe.id%}">edit</a>
		{%endif%}
		</p>

		<h2>Vote recipe</h2>
		<h5><span id="score">{{ score.score }}</span> point{{ score.score|pluralize }}
		after <span id="num_votes">{{ score.num_votes }}</span> vote{{ score.num_votes|pluralize }}</h5><br />
		{% if user.is_authenticated %}
			<ul id="voting" recipeId="{{ recipe.id }}">
				<li><a id="voting-upvote" href="" class="button"><span class="add">I like it.</span></a></li>
				<li><a id="voting-downvote" href="" class="button"><span class="delete">I hate it.</span></a></li>
				<li><a id="voting-clearvote" href="" class="button"><span class="recycle">Clear my vote.</span></a></li>
			</ul>
		{% else %}
			<p>Please <a href="/accounts/login/">log in</a> to rate</p>
		{% endif %}

		<div class="clear"></div>
	
		<h2>Similar stuff</h2>

		<ul id="similar_recipes">
			<li>Loading recipes requires Javascript</li>
		</ul>
	
	</div><!-- end div page -->
{%endblock content%}
